<template>
  <view v-for="(item, index) in form.insureAddList" :key="index">
    <ve-card :title="form.insureAddList[0].insureKind==0?'交强险信息':'商业险信息'" type="none" fold v-model:initFold="item.initFold">
      <ve-form-item label="保险单关联门店" @click="getIndex(index)" required :prop="`insureAddList.${index}.siteId`">
        <remote-select type="site" v-model="item.siteId"  :label="item.siteName" :params="{ oldId: form.insureAddList[index].siteId }" @change="changeSiteId"  />
      </ve-form-item>
      <ve-form-item label="保险公司" @click="getIndex(index)" required :prop="`insureAddList.${index}.insureCompany`">
        <remote-select type="supplierInsure" v-model="item.insureCompany" @change="changeSupplierId" :params="{ id: form.insureAddList[index].insureCompany }" :label="item.insureCompanyStr" />
      </ve-form-item>
      <ve-form-item label="保险单号">
        <ve-input v-model="item.insureNo" placeholder="请输入" :maxlength="30" />
      </ve-form-item>
      <ve-form-item label="有效期" labelPosition="top" required :prop="`insureAddList.${index}.times`">
        <ve-daterange-picker
          v-model:start="item.beginDate"
          v-model:end="item.endDate"
          :placeholder="['开始时间', '结束时间']"
          mode="date"
          @confirm="timeRangeConfirmFn($event, index)"
        />
      </ve-form-item>
      <!-- 交强险 -->
      <block v-if="form.insureAddList[0].insureKind==0">
        <ve-form-item label="保额" unit="元">
          <ve-input-number :precision="2" :min="0" :max="99999999.99" placeholder="请输入" v-model="item.insuredSum"/>
        </ve-form-item>
        <ve-form-item label="保险费" unit="元">
          <ve-input-number :precision="2" :min="0" :max="99999999.99" placeholder="请输入" v-model="item.insureAmt"/>
        </ve-form-item>
      </block>
      <!-- 商业险 -->
      <block v-else>
        <ve-form-item label="投保信息">
        </ve-form-item>
        <view class="form-fee-content" v-for="(el, elindex) in item.carInsureDetail" :key="elindex">
          <view class="form-fee-content-title">
            <span class="form-fee-content-title-text">新增险种{{ elindex + 1 }}</span>
            <view @click="deleteEl(index, elindex)">
              <ve-icon name="delete_1" color="rgba(23,22, 22, 1)" size="36" />
            </view>
          </view>
          <view class="form-fee-content-content">
            <ve-form-item label="承保险种">
              <ve-picker-inline
                v-model="el.insureKindType"
                placeholder="请选择"
                :range="sysDict.insure_business_kind_type"
                unit="arrowRight"
              >
              </ve-picker-inline>
            </ve-form-item>
            <ve-form-item label="保额" unit="元">
              <ve-input-number
                :precision="2"
                placeholder="请输入"
                v-model="el.insuredSum"
                :min="0"
                :max="99999999.99"
              />
            </ve-form-item>
            <ve-form-item label="保险费" unit="元" :borderBottom="false">
              <ve-input-number
                :precision="2"
                placeholder="请输入"
                v-model="el.insureAmt"
                :min="0"
                :max="99999999.99"
              />
            </ve-form-item>
          </view>
        </view>
        <view class="ve-form-item-btn ve-form-item-btn-have-data" @click="addNewInsure(index)">
          <ve-icon name="plus" size="30"></ve-icon>
          <span class="ve-form-item-btn-text">新增险种</span>
        </view>
      </block>
      <ve-form-item label="上传文件" :borderBottom="index==0 && (pageType == 'add' || pageType == 'edit')?false:true">
        <uploadFile v-model:fileId="item.policyImgFileId" :fileTypes="fileTypes" @change="getFileObj" :fileIndex="index"></uploadFile>
      </ve-form-item>
      <view class="ve-form-item-btn delete-btn" @click="deleteInsure(index)" v-if="index>0 && pageType == 'add'">
        <!-- svg: 红色 -->
        <ve-icon name="delete_2" color="#cf4444" size="30" />
        <span class="ve-form-item-btn-text delete-text">{{form.insureAddList[0].insureKind == 0 ? '删除交强险': '删除商业险'}}</span>
      </view>
      <view class="delete-in"></view>
    </ve-card>
  </view>
</template>

<script setup lang="ts">
    import uploadFile from '@/components/upload-file/index.vue'

    import { inject, ref, provide, nextTick } from 'vue'
    import { usePageDict, useSysDict } from '@/hooks/useDict'
    const sysDict = useSysDict(['insure_business_kind_type'])
    const form = inject('form')
    provide('form', form.value)
    const fileTypes = ref(['pdf'])
    const props = defineProps({
      pageType: {
        type: String
      },
    })
    const popupIndex = ref(null) //点的第几个保险的上传popup
    const initFold1 = ref(true)
    const datetimeparams = ref({
      year: true,
      month: true,
      day: true,
      hour: true,
      minute: true,
      second: true,
    })
    const clickIndex = ref(null) //点击的index
    const getIndex = (index) => {
      clickIndex.value = index
    }
    // 日期范围变化
    const timeRangeConfirmFn = (value, index) => {
      clickIndex.value = index
      console.log(value)
      console.log(clickIndex.value)
      console.log(form.value.insureAddList[clickIndex.value])
      form.value.insureAddList[clickIndex.value].times = value[0]&&value[1]?value:[]
    }
    // 保险公司
    const changeSupplierId = (a, option = {}) => {
      console.log(a)
      console.log(option)
      form.value.insureAddList[clickIndex.value].insureCompany = a
      form.value.insureAddList[clickIndex.value].insureCompanyStr = option.supplierName
    }
    // 保险单关联门店
    const changeSiteId = (a, option = {}) => {
      console.log(a)
      console.log(option)
      form.value.insureAddList[clickIndex.value].siteId = a
      form.value.insureAddList[clickIndex.value].siteName = option.siteName
    }
    // 险种
    const changeUndertaker = (a, option = {}) => {
      form.value.undertakerId = a
      form.value.undertaker = option.realname
    }
    // 新增险种
    const addNewInsure = (index) => {
      form.value.insureAddList[index].carInsureDetail.push({
        insureKindType: undefined,
        insuredSum: undefined,
        insureAmt: undefined
      })
    }
    // 商业险删除险种
    const deleteEl = (index, elindex) => {
      form.value.insureAddList[index].carInsureDetail.splice(elindex, 1)
    }
    const deleteInsure = (index) => {
      form.value.insureAddList.splice(index, 1)
    }
    const getFileObj = (e) => {
      console.log('文件file: ', e)
    }
</script>

<style lang="scss" scoped>
  .form-fee-content {
    width: 654rpx;
    background: #f7f8fa;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    margin-bottom: 32rpx;
    .form-fee-content-title {
      height: 88rpx;
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
      background: #f0f1f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .form-fee-content-title-text {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #191c27;
    }
    .form-fee-content-content {
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
    }
  }
  .ve-form-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #3072f6;
    .ve-form-item-btn-text {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3072f6;
      margin-left: 18rpx;
    }
  }
  .ve-form-item-btn-have-data {
    margin-top: 32rpx;
  }
  .delete-btn{
    margin-bottom: 24rpx;
    border: 2rpx solid #FE615A !important;
    background: #ffffff !important;
    .delete-text{
      color: #FE615A !important;
    }
  }
  .delete-in{
    height: 12rpx;
  }
  .add-popup{
    padding: 0 40rpx 64rpx;
    .tlt{
      margin: 48rpx 0;
      width: 100%;
      text-align: center;
    }
    .button{
      margin-bottom: 32rpx;
    }
  }
  .file-choose{

  }
  .file-type{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .file-name{
      max-width: 70%;
    }
  }
  .list-item {
    width: 204rpx;
    height: 204rpx;
    margin-right: 20rpx;
    overflow: hidden;
    // background: rgb(244, 245, 246);
    border-radius: 8rpx;
    border: 2rpx dashed #e2e2e2;
    overflow: hidden;
    position: relative;
    border-radius: 4rpx;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
  }
  .delete-icon {
    position: absolute;
    top: 10rpx;
    right: 0rpx;
    z-index: 1;
    border-radius: 100rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .icon-clear-img {
    position: absolute;
    right: 10rpx;
    color: rgba(0, 0, 0, 0.8);
    width: 48rpx;
    height: 48rpx;
  }
  .preview-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4rpx;
  }
</style>
